<template>
  <div class="agri-finance-platform">
    <!-- 导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <div class="logo">
            <i class="fas fa-leaf logo-icon"></i>
            <h1>农产品融销一体平台</h1>
          </div>
        </div>

        <div class="header-center">
          <nav class="nav-links">
            <a href="#" class="active">首页</a>
            <a href="#" @click.prevent="scrollToSection('financial-products')">融资服务</a>
            <a href="#" @click.prevent="scrollToSection('experts')">专家助力</a>
            <a href="#" @click.prevent="scrollToSection('agri-ecommerce')">农产品交易</a>
          </nav>
        </div>

        <div class="header-right">
          <div class="user-links">
            <button class="login-btn" @click.prevent="scrollToSection('login')">登录</button>
          </div>
        </div>
      </div>
    </header>

    <!-- 轮播图区域 -->
    <div class="carousel-container">
      <div 
        v-for="(slide, index) in carouselSlides" 
        :key="index" 
        class="carousel-slide" 
        :class="{ active: currentSlide === index }"
        :style="{ backgroundImage: `url(${slide.image})` }"
      >
        <div class="slide-content">
          <h2>{{ slide.title }}</h2>
          <p>{{ slide.description }}</p>
        </div>
      </div>
      <div class="carousel-controls">
        <div 
          v-for="(slide, index) in carouselSlides" 
          :key="index" 
          class="carousel-dot" 
          :class="{ active: currentSlide === index }"
          @click="setSlide(index)"
        ></div>
      </div>
      <!-- 轮播图控制按钮 -->
      <button class="carousel-arrow prev" @click="prevSlide">
        <i class="fas fa-chevron-left"></i>
      </button>
      <button class="carousel-arrow next" @click="nextSlide">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>

    <!-- 金融产品区域 -->
    <section id="financial-products" class="financial-products">
      <div class="container">
        <h2 class="section-title">金融产品</h2>
        <div class="products-grid">
          <!-- 产品卡片 1 -->
          <div class="product-card" :class="{ 'highlighted': activeProduct === 0 }" @mouseenter="activeProduct = 0" @mouseleave="activeProduct = -1">
            <div class="bank-logo">
              <span class="bank-icon">🌾</span>
              <span class="bank-name">中国农业银行</span>
            </div>
            <h3 class="product-name">种植贷</h3>
            <p class="product-desc">针对种植户提供的专项贷款</p>
            <p class="product-amount">¥100,000</p>
            <p class="product-term">贷款期限：1-3年</p>
            <button class="apply-btn">查看详情</button>
          </div>

          <!-- 产品卡片 2 -->
          <div class="product-card" :class="{ 'highlighted': activeProduct === 1 }" @mouseenter="activeProduct = 1" @mouseleave="activeProduct = -1">
            <div class="bank-logo">
              <span class="bank-icon">🏭</span>
              <span class="bank-name">中国工商银行</span>
            </div>
            <h3 class="product-name">创业贷</h3>
            <p class="product-desc">针对农业创业者的启动资金贷款</p>
            <p class="product-amount">¥750,000</p>
            <p class="product-term">贷款期限：3-5年</p>
            <button class="apply-btn">查看详情</button>
          </div>

          <!-- 产品卡片 3 -->
          <div class="product-card" :class="{ 'highlighted': activeProduct === 2 }" @mouseenter="activeProduct = 2" @mouseleave="activeProduct = -1">
            <div class="bank-logo">
              <span class="bank-icon">🔧</span>
              <span class="bank-name">中国建设银行</span>
            </div>
            <h3 class="product-name">设备贷</h3>
            <p class="product-desc">用于农业设备采购的专项贷款</p>
            <p class="product-amount">¥150,000</p>
            <p class="product-term">贷款期限：2-4年</p>
            <button class="apply-btn">查看详情</button>
          </div>

          <!-- 产品卡片 4 -->
          <div class="product-card" :class="{ 'highlighted': activeProduct === 3 }" @mouseenter="activeProduct = 3" @mouseleave="activeProduct = -1">
            <div class="bank-logo">
              <span class="bank-icon">📈</span>
              <span class="bank-name">中国农业银行</span>
            </div>
            <h3 class="product-name">发展贷</h3>
            <p class="product-desc">支持农业企业扩大规模的贷款</p>
            <p class="product-amount">¥500,000</p>
            <p class="product-term">贷款期限：3-6年</p>
            <button class="apply-btn">查看详情</button>
          </div>
        </div>
        <div class="products-actions">
          <button class="view-more">查看更多</button>
        </div>
      </div>
    </section>

    <!-- 专家介绍区域 -->
    <section id="experts" class="experts">
      <div class="container">
        <h2 class="section-title">专家介绍</h2>
        <div class="experts-grid">
          <!-- 专家 1 -->
            <div class="expert-card" v-for="(exp, idx) in experts" :key="idx">
            <div class="expert-avatar">
              <img :src="exp.avatar" alt="专家头像">
            </div>
            <h3 class="expert-name">{{ exp.name }}</h3>
            <p class="expert-title">{{ exp.title }}</p>
              <p class="expert-desc">{{ exp.desc }}</p>
            <div class="expert-actions">
              <button class="consult-btn">在线咨询</button>
              <button class="offline-btn">线下预约</button>
            </div>
          </div>
        </div>
        <div class="experts-actions">
          <button class="view-more">查看更多</button>
        </div>
      </div>
    </section>

    <!-- 专家问答区域 -->
    <section class="expert-qa">
      <div class="container">
        <h2 class="section-title">专家问答</h2>
        <div class="qa-content">
          <div class="qa-image">
            <img src="https://picsum.photos/seed/grain/300/300" alt="农作物图片">
            <button class="view-more">查看更多</button>
          </div>
          <div class="qa-list">
            <!-- 问答 1 -->
            <div class="qa-item">
              <h3 class="qa-question">
                <span class="q-icon">Q</span>
                草莓适合如何种植？
              </h3>
              <p class="qa-answer">
                <span class="a-icon">A</span>
                草莓是多年生草本植物，喜温凉气候，草莓根系生长温度5-30℃，适温15-22℃，茎叶生长适温为20-30℃，芽在-15-10℃发生冻害，花芽分化期温度须保持5-15℃，开花结果期4-40℃。草莓越夏时，气温高于30℃并且日照强时，需采取遮荫措施。
              </p>
            </div>

            <!-- 问答 2 -->
            <div class="qa-item">
              <h3 class="qa-question">
                <span class="q-icon">Q</span>
                土壤应该怎么维护？
              </h3>
              <p class="qa-answer">
                <span class="a-icon">A</span>
                在土壤管理中，施肥是重要的环节，它占了农业生产总成本三分之一左右。建立土壤有机肥培肥体系，同时轮作、种植绿肥，为了提高耕地质量和肥料利用率，要更加注重投入有机肥和生物菌肥，结合秸秆还田的方式进行改良。
              </p>
            </div>

            <!-- 问答 3 -->
            <div class="qa-item">
              <h3 class="qa-question">
                <span class="q-icon">Q</span>
                田块收温度控制在多少度？
              </h3>
              <p class="qa-answer">
                <span class="a-icon">A</span>
                大棚种植时，温度管理对作物生长至关重要，应根据不同作物需求控制在适宜范围内，以提高产量和品质。
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 农业知识区域 -->
    <section class="agri-knowledge">
      <div class="container">
        <h2 class="section-title">农业知识</h2>
        <div class="knowledge-cards">
          <!-- 知识卡片 1 -->
          <div class="knowledge-card">
            <div class="knowledge-image">
              <img src="https://picsum.photos/seed/rice/400/200" alt="水稻种植">
            </div>
            <div class="knowledge-content">
              <h3>水稻种植的病虫害防治</h3>
              <p>水稻种植过程中，常见的病虫害有稻瘟病、纹枯病、稻曲病等病害，主要虫害有稻纵卷叶螟、稻飞虱、二化螟等。防治方法包括：1. 农业防治，选用抗病品种，合理密植，科学施肥管水；2. 物理防治，安装诱虫灯、粘虫板等物理装置诱杀害虫；3. 生物防治，保护利用天敌，使用生物农药；4. 化学防治，在病虫害发生初期选用高效低毒农药，如井冈霉素防治纹枯病，注意轮换用药，做到对症下药，同时严格掌握安全间隔期，确保稻米质量安全。</p>
              <button class="read-more">查看详情</button>
            </div>
          </div>

          <!-- 知识卡片 2 -->
          <div class="knowledge-card">
            <div class="knowledge-content">
              <h3>玉米种植过程详解</h3>
              <p>玉米种植是一个系统的过程，需要科学管理才能获得高产。玉米对水分的需求敏感期是：拔节期和灌浆期；适合玉米生长的土壤是疏松肥沃、有机质含量高的土壤，适宜的土壤pH值为5-8.0。播种前需要进行种子处理，包括晒种和拌种，为种子萌发创造良好条件。播种时要注意播种深度和密度，通常播种深度以5-6cm为宜，要根据品种特性确定种植密度，控制好田间通风，减少病虫害发生，提高光合作用效率。普通玉米亩保苗4000-4500株，紧凑型品种4500-5500株以上。</p>
              <button class="read-more">查看详情</button>
            </div>
            <div class="knowledge-image">
              <img src="https://picsum.photos/seed/corn/400/200" alt="玉米种植">
            </div>
          </div>
        </div>
        <div class="knowledge-actions">
          <button class="view-more">查看更多</button>
        </div>
      </div>
    </section>

    <!-- 助农电商区域 -->
    <section id="agri-ecommerce" class="agri-ecommerce">
      <div class="container">
        <h2 class="section-title">助农电商</h2>
        <div class="products-grid">
          <!-- 农产品 1 -->
          <div class="ecom-product" v-for="(product, index) in ecomProducts" :key="index">
            <div class="product-image">
              <img :src="product.image" alt="产品图片">
            </div>
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-origin">{{ product.origin }}</p>
            <p class="product-price">¥{{ product.price }}</p>
            <button class="buy-btn">立即购买</button>
          </div>
        </div>
        <div class="ecom-actions">
          <button class="view-more">查看更多</button>
        </div>
      </div>
    </section>

    <!-- 用户登录 -->
    <main class="main-content" id="login">
      <div class="role-selection">
        <h2>选择您的角色</h2>
        <p>选择您想要访问我们平台的方式</p>
        <div class="role-cards">
          <div class="role-card farmer" @click="selectRole('farmer')">
            <div class="role-icon">👨‍🌾</div>
            <h3>农户</h3>
            <p>登录以管理您的作物，列出产品并与买家联系</p>
            <button class="btn-login farmer-btn">农户登录</button>
          </div>
          <div class="role-card consumer" @click="selectRole('consumer')">
            <div class="role-icon">👨‍💼</div>
            <h3>买家</h3>
            <p>浏览新鲜农产品，下订单并与农民联系</p>
            <button class="btn-login consumer-btn">买家登录</button>
          </div>
          <div class="role-card bank" @click="selectRole('bank')">
            <div class="role-icon">🏦</div>
            <h3>银行</h3>
            <p>审批贷款申请，管理金融产品</p>
            <button class="btn-login bank-btn">银行登录</button>
          </div>
          <div class="role-card expert" @click="selectRole('expert')">
            <div class="role-icon">👨‍🔬</div>
            <h3>专家</h3>
            <p>提供农业知识指导，解答农户问题</p>
            <button class="btn-login expert-btn">专家登录</button>
          </div>
        </div>
      </div>     
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-logo">
          <i class="fas fa-leaf"></i>
          <span>农产品融销一体平台</span>
        </div>
        <div class="footer-links">
          <a href="#">关于我们</a>
          <a href="#">联系方式</a>
          <a href="#">使用条款</a>
          <a href="#">隐私政策</a>
        </div>
        <p>© 2025 农产品融销一体平台. 哈吉咪版权所有</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 轮播图轮播
const currentSlide = ref(0)
const carouselSlides = ref([
  {
    title: '连接农民与消费者',
    description: '提供新鲜、优质的农产品直接交易平台，减少中间环节',
    image: 'https://images.unsplash.com/photo-1500937386664-56d1dfef3854?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80'
  },
  {
    title: '农业金融服务',
    description: '为农民提供便捷的融资渠道，助力农业可持续发展',
    image: 'https://images.unsplash.com/photo-1464226184884-fa280b87c399?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80'
  },
  {
    title: '专家技术支持',
    description: '连接农业专家与农民，提供专业的技术指导和解决方案',
    image: 'https://images.unsplash.com/photo-1586771107445-d3ca888129ce?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80'
  },
  {
    title: '数字化农业生态',
    description: '构建完整的农业数字化生态系统，实现多方共赢',
    image: 'https://images.unsplash.com/photo-1625246339666-4c6f58dcb876?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80'
  }
])
const setSlide = (index) => {
  currentSlide.value = index
}
const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % carouselSlides.value.length
}
const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + carouselSlides.value.length) % carouselSlides.value.length
}
onMounted(() => {
  const interval = setInterval(() => {
    currentSlide.value = (currentSlide.value + 1) % carouselSlides.value.length
  }, 5000)
  
  // 清理定时器
  const cleanup = () => clearInterval(interval)
  window.addEventListener('beforeunload', cleanup)
  return cleanup
})

// activeProduct 用于金融产品卡 hover 高亮
const activeProduct = ref(-1)

const experts = ref([
  { avatar: 'https://picsum.photos/seed/expert1/100/100', name: '张明', title: '农业技术专家', desc: '从事农业技术研究20年，擅长作物栽培与病虫害防治' },
  { avatar: 'https://picsum.photos/seed/expert2/100/100', name: '李强', title: '土壤肥料专家', desc: '专注土壤改良与科学施肥技术，拥有丰富实践经验' },
  { avatar: 'https://picsum.photos/seed/expert3/100/100', name: '王丽', title: '农业经济分析师', desc: '农业政策与市场分析专家，帮助农户把握市场动态' },
  { avatar: 'https://picsum.photos/seed/expert4/100/100', name: '赵芳', title: '畜牧养殖专家', desc: '在规模化养殖与疫病防控方面有深入研究' },
  { avatar: 'https://picsum.photos/seed/expert5/100/100', name: '陈杰', title: '农产品加工专家', desc: '专注农产品深加工技术与质量安全管理' }
])

const ecomProducts = ref([
  { image: 'https://picsum.photos/seed/soybean/300/300', name: '东北有机黄豆', origin: '黑龙江省齐齐哈尔市龙江县', price: '22.00'},
  { image: 'https://picsum.photos/seed/apricot/300/300', name: '新疆伊犁小红杏', origin: '新疆伊犁哈萨克自治州', price: '43.00'},
  { image: 'https://picsum.photos/seed/banana/300/300', name: '高山甜香蕉', origin: '云南省西双版纳傣族自治州', price: '23.00'},
  { image: 'https://picsum.photos/seed/onion/300/300', name: '山东大葱', origin: '山东省济南市章丘区', price: '14.00'},
  { image: 'https://picsum.photos/seed/mushroom/300/300', name: '羊肚菌', origin: '四川省阿坝藏族羌族自治州', price: '86.00'},
])

//页面滑动
const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId)
  if (element) {
    // 平滑滚动到目标元素，距离顶部50px偏移
    window.scrollTo({
      top: element.offsetTop - 80,
      behavior: 'smooth'
    })
    
    // 更新导航栏激活状态
    updateActiveNav(sectionId)
  }
}

// 更新导航栏激活状态
const updateActiveNav = (sectionId) => {
  const links = document.querySelectorAll('.nav-links a')
  links.forEach(link => link.classList.remove('active'))
  
  // 根据sectionId匹配对应的导航项
  const navMap = {
    'financial-products': 1,
    'experts': 2,
    'agri-ecommerce': 3
  }
  
  if (navMap[sectionId] !== undefined) {
    links[navMap[sectionId]]?.classList.add('active')
  }
  
  // 首页特殊处理
  if (sectionId === 'home' || sectionId === '') {
    links[0]?.classList.add('active')
  }
}

//用户登录
const selectRole = (role) => {
  if(role === 'farmer'){
    router.push('/farmer')
  }
  else if(role === 'consumer'){
    router.push('/buyer')
  }
  else if(role === 'bank'){
    router.push('/bank')
  }
  else if(role === 'expert'){
    router.push('/expert')
  }
}
</script>

<style scoped>
/* 全局样式 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 28px;
  color: #2d6a4f;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 15px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: #40916c;
}

.view-more {
  background-color: #40916c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.view-more:hover {
  background-color: #2d6a4f;
  transform: translateY(-2px);
}

/* 导航栏样式 */
.header {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  color: #ffffff;
  padding: 15px 0;
  /* 取消全局居中，改由内部容器控制布局 */
  text-align: initial;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: center; /* 中心容器，使用绝对定位来居中导航 */
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  position: relative;
}

.header-left { display:flex; align-items:center; }
.header-center { position: absolute; left: 50%; transform: translateX(-50%); }
.header-right { display:flex; align-items:center; margin-left: auto; }
.user-links { display:flex; gap:12px; }
.user-links a { color: #faf7f7; text-decoration:none; padding:6px 10px; border-radius:6px; transition: background 0.2s; }
.user-links a:hover { background: rgba(255,255,255,0.06); }

/* 登录按钮样式（header 右侧） */
.login-btn {
  width: 85px;
  height: 40px;
  /* 透明玻璃背景 */
  background: rgba(255,255,255,0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 5px;
}

.login-btn:hover {
  background-color: #23533d;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {
  color: #faf7f7;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s ease;
  padding: 5px 0;
  position: relative;
}

.nav-links a.active,
.nav-links a:hover {
  color: #e2be07;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e2be07;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: logoSlideIn 0.5s ease-out;
}

@keyframes logoSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo h1 {
  font-size: 24px;
  font-weight: 600;
}

.logo-icon {
  font-size: 28px;
  color: #ffd54f;
}

/* 轮播图区域样式 */
.carousel-container {
  height: 450px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.carousel-slide.active {
  opacity: 1;
}

.slide-content {
  text-align: center;
  max-width: 800px;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  backdrop-filter: blur(5px);
  animation: slideContentFadeIn 1s ease-out;
}

@keyframes slideContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-content h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #ffffff;
  font-weight: 700;
}

.slide-content p {
  font-size: 1.2rem;
  line-height: 1.6;
}

.carousel-controls {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  transform: scale(1);
}

.carousel-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.carousel-dot.active {
  background-color: #fff;
  transform: scale(1.3);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  opacity: 0;
}

.carousel-container:hover .carousel-arrow {
  opacity: 1;
}

.carousel-arrow.prev {
  left: 20px;
}

.carousel-arrow.next {
  right: 20px;
}

.carousel-arrow:hover {
  background-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%) scale(1.1);
}

/* 金融产品区域样式 */
.financial-products {
  padding: 80px 0;
  background-color: #f8f9fa;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.product-card {
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.product-card.highlighted {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #40916c;
}

.bank-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #333;
}

.bank-icon {
  font-size: 24px;
}

.bank-name {
  font-weight: 600;
}

.product-name {
  color: #2d6a4f;
  font-size: 20px;
  margin-bottom: 10px;
}

.product-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.product-amount {
  font-size: 24px;
  font-weight: bold;
  color: #e63946;
  margin-bottom: 10px;
}

.product-term {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.apply-btn {
  width: 100%;
  background-color: #40916c;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.apply-btn:hover {
  background-color: #2d6a4f;
}

.products-actions {
  text-align: center;
}

/* 专家介绍区域样式 */
.experts {
  padding: 80px 0;
  background-color: white;
}

.experts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.expert-card {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.expert-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.expert-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 3px solid #40916c;
}

.expert-name {
  color: #333;
  font-size: 18px;
  margin-bottom: 5px;
}

.expert-title {
  color: #40916c;
  font-size: 14px;
  margin-bottom: 10px;
}

.expert-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
  min-height: 60px;
}

.expert-actions {
  display: flex;
  gap: 10px;
}

.consult-btn {
  flex: 1;
  background-color: #40916c;
  color: white;
  border: none;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.consult-btn:hover {
  background-color: #2d6a4f;
}

.offline-btn {
  flex: 1;
  background-color: transparent;
  color: #40916c;
  border: 1px solid #40916c;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.offline-btn:hover {
  background-color: #40916c;
  color: white;
}

.experts-actions {
  text-align: center;
}

/* 专家问答区域样式 */
.expert-qa {
  padding: 80px 0;
  background-color: #f0f7f4;
}

.qa-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}

.qa-image img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.qa-image {
  text-align: center;
}

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.qa-item {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.qa-question {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #2d6a4f;
  margin-bottom: 10px;
  font-size: 18px;
}

.qa-answer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #333;
  line-height: 1.6;
}

.q-icon, .a-icon {
  background-color: #40916c;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: bold;
}

.a-icon {
  background-color: #3d5a80;
}

/* 农业知识区域样式 */
.agri-knowledge {
  padding: 80px 0;
  background-color: white;
}

.knowledge-cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 40px;
}

.knowledge-card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.knowledge-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knowledge-content {
  padding: 30px;
}

.knowledge-content h3 {
  color: #2d6a4f;
  font-size: 22px;
  margin-bottom: 15px;
}

.knowledge-content p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
}

.read-more {
  background-color: transparent;
  color: #40916c;
  border: 1px solid #40916c;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.read-more:hover {
  background-color: #40916c;
  color: white;
}

.knowledge-actions {
  text-align: center;
}

/* 助农电商区域样式 */
.agri-ecommerce {
  padding: 80px 0;
  background-color: #f8f9fa;
}

.ecom-product {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.ecom-product:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.product-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-name {
  padding: 0 15px;
  font-size: 18px;
  margin: 15px 0 5px 0;
  color: #333;
}

.product-origin {
  padding: 0 15px;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.product-price {
  padding: 0 15px;
  font-size: 20px;
  font-weight: bold;
  color: #e63946;
  margin-bottom: 15px;
}

.buy-btn {
  width: calc(100% - 30px);
  margin: 0 15px 15px 15px;
  background-color: #40916c;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.buy-btn:hover {
  background-color: #2d6a4f;
}

.ecom-actions {
  text-align: center;
  margin-top: 40px;
}

/* 用户登录 */
.main-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

.role-selection {
  margin-bottom: 60px;
}

.role-selection h2 {
  font-size: 2.2rem;
  color: #2e7d32;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.role-selection h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: #2e7d32;
  border-radius: 2px;
}

.role-selection p {
  font-size: 1.1rem;
  color: #757575;
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.role-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.role-card {
  background: #fff;
  border-radius: 16px;
  padding: 35px;
  width: 280px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.role-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #2e7d32;
  transform: scaleX(0);
  transition: all 0.3s ease;
}

.role-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.role-card:hover::before {
  transform: scaleX(1);
}

.role-icon {
  font-size: 5rem;
  margin-bottom: 25px;
  color: #2e7d32;
  transition: all 0.3s ease;
}

.role-card:hover .role-icon {
  transform: scale(1.1) rotate(5deg);
}

.role-card.farmer::before {
  background: #2e7d32;
}

.role-card.consumer::before {
  background: #ff9800;
}

.role-card.bank::before {
  background: #2196f3;
}

.role-card.expert::before {
  background: #9c27b0;
}

.role-card.consumer .role-icon { color: #ff9800; }
.role-card.bank .role-icon { color: #2196f3; }
.role-card.expert .role-icon { color: #9c27b0; }

.role-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #212121;
}

.role-card p {
  color: #757575;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* 登录按钮样式 */
.btn-login {
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.farmer-btn {
  background-color: #2e7d32;
  color: #fff;
}

.farmer-btn:hover {
  background-color: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(46, 125, 50, 0.3);
}

.consumer-btn {
  background-color: #ff9800;
  color: #fff;
}

.consumer-btn:hover {
  background-color: #f57c00;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3);
}

.bank-btn {
  background-color: #2196f3;
  color: #fff;
}

.bank-btn:hover {
  background-color: #1976d2;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
}

.expert-btn {
  background-color: #9c27b0;
  color: #fff;
}

.expert-btn:hover {
  background-color: #7b1fa2;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(156, 39, 176, 0.3);
}

/* 页脚样式 */
.footer {
  background-color: #1b5e20;
  color: #fff;
  padding: 40px 20px;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: 600;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .qa-content {
    grid-template-columns: 1fr;
  }
  
  .knowledge-card {
    grid-template-columns: 1fr;
  }
  
  .knowledge-image img {
    height: 250px;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
  }
  
  .nav-links {
    display: none;
  }
  
  .experts-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 576px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .hero {
    height: 350px;
  }
  
  .hero h1 {
    font-size: 24px;
  }
  
  .hero p {
    font-size: 16px;
  }
  
  .section-title {
    font-size: 24px;
  }
  
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>